import React, {Component} from 'react';
import {Col, Row, Spin} from 'antd';
import Sider from "./components/sider";
import CardList from "./components/cardList";
import './components/style.less'

class Index extends Component {
    constructor(props) {
        super(props)
        // 创建Ref
        this.childRef = React.createRef();
        this.cardRef = React.createRef();
        this.state = {
            colorOption: [
                {
                    name: '白色',
                    value: "#fff",
                    des: "空房"
                },
                {
                    name: '橙色',
                    value: "#ff913a",
                    des: "保留"
                },
                {
                    name: '灰色',
                    value: "#ababab",
                    des: "脏房"
                },
                {
                    name: '红色',
                    value: "#f14a4a",
                    des: "维修"
                },
                {
                    name: '绿色',
                    value: "#43a614",
                    des: "预定"
                },
                {
                    name: '蓝色',
                    value: "#058eee",
                    des: "入住"
                },
                // {
                //     name:'藏青色',
                //     value:"#07989c"
                // },
            ],
            loading: false
        }
    }
    openLoading = ()=>{
        this.setState({
            loading: true
        })
    }
    initData = (values) => {
        // console.log(values)
        this.setState({
            loading: false
        })
        // console.log('4')
        this.cardRef.current.init(values)
    }
    refresh = () => {
        // console.log('2')
        this.childRef.current.getData();
    }

    render() {
        let {colorOption,loading} = this.state;
        return (
            <Row gutter={16} style={{height: "100%"}}>
                <Col span={4}>
                    <Sider history={this.props.history} ref={this.childRef} openLoading={this.openLoading} colorOption={colorOption}
                           initData={(v) => this.initData(v)}/>
                </Col>
                <Col span={20}>
                    <Spin spinning={loading} size="large">
                        <CardList refresh={this.refresh} ref={this.cardRef} colorOption={colorOption}/>
                    </Spin>
                </Col>
            </Row>
        );
    }
}

export default Index;
